<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>16_async与await</title>
</head>

<body>
  <!-- 
    1. async修饰的函数
      函数的返回值为 Promise对象
      Promise对象的结果由 async修饰的函数执行结果的返回值决定

    2. await表达式
      await右侧的表达式一般为 Promise实例对象, 但也可以是其他的值
      如果表达式是 Promise实例对象, await后的返回值是 Promise成功的值
      如果表达式是 其他值,   直接将此值作为 await的返回值.

    3. 注意:
      await必须写在 async函数中, 但是async函数中可以没有await
      如果await的Promise失败了,就会抛出异常,需要通过 try...catch来捕获处理
  -->


  <script>
    // #region 演示: async await的使用
    // 1、创建一个 Promise实例对象
    // const p = new Promise((resolve,reject) => {
    //   setTimeout(() => {
    //     reject('a');
    //   });
    // }, 1000);

    // 2、使用 .then指定成功/失败的回调
    // p.then(
    //   (value) => { console.log('ok:', value) },
    //   (reason) => { console.log('err:', reason) },
    // )

    // 3、使用 async await 指定成功的回调
    // 因为 await 只能等待 p 成功的回调, 才能继续执行后续代码
    // 失败用 try {} catch(err) {} 处理
    // async function demo() {
    //   try {
    //     const result = await p;
    //     console.log('ok:', result);
    //   } catch(err) {
    //     console.log('err:', err) ;
    //   }
    // };
    // demo();

    // 4、优化 async代码
    // !(async() => {
    //   try {
    //     const result = await p;
    //     console.log('ok:', result);
    //   } catch(err) {
    //     console.log('err:', err) ;
    //   }
    // })()
    //  #endregion


    // #region 演示: async await连续调用
    // const p1 = new Promise((resolve,reject) => {
    //   setTimeout(() => {
    //     // resolve('a');
    //     reject('一些错误');
    //   });
    // }, 1000);

    // const p2 = new Promise((resolve,reject) => {
    //   setTimeout(() => {
    //     resolve('b');
    //   });
    // }, 2000);

    // !(async() => {
    //   try {
    //     const result1 = await p1;
    //     console.log('ok:', result1);
    //     const result2 = await p2;
    //     console.log('ok:', result2);
    //   }catch(err) {
    //     console.log('err:', err);
    //   }
    // })();
    // #endregion


    // #region 验证: async修饰的函数的返回值
    // async function demo (){
    //   return Promise.reject('失败了');
    // };

    // const result = demo();
    // result.then(
    //   (value) => { console.log('ok:', value) },
    //   (reason) => { console.log('err:', reason) }
    // );
    // #endregion


    // #region 验证: await表达式的返回值
    // const p = new Promise((resolve,reject) => {
    //   setTimeout(() => {
    //     resolve('a');
    //   });
    // }, 1000);

    // async function demo(){
    //   const a = await p;
    //   console.log(a);
    // };
    // demo();
    // #endregion


  </script>
</body>

</html>
